<template>
  <m-container class="start-inventory">
    <in-work-scan
      @change="handleChange"
      :palletCode="palletCode"
      scan
      :scan-text="palletCode ? '扫描商品码' : '扫描托盘码'"
    />
    <inventory-card :modal="info" v-if="options.id">
      <view class="grid">
        <view class="item">
          <text>仓库编号</text>
          <view>{{ info.imsCode }}</view>
        </view>
        <view class="item">
          <text>区域编号</text>
          <view>{{ info.areaCode }}</view>
        </view>
        <view class="item">
          <text>库位编号(栈号、层号、位号)</text>
          <view>{{ info.stackNo + '-' + info.levelNo + '-' + info.locationNo }}</view>
        </view>
        <view class="item">
          <text>托盘编号</text>
          <view>{{ info.palletCode }}</view>
        </view>
      </view>
    </inventory-card>

    <view class="box">
      <view class="header">库存信息</view>
      <view class="box_grid">
        <inventory-code-item v-for="(item, index) in list" :key="index" :modal="item" />
      </view>
    </view>
    <m-fixed>
      <m-button size="xl" @click="handleClickNext" :disabled="getDisabled">拣货完成</m-button>
    </m-fixed>
  </m-container>
</template>

<script>
import { router } from '@/router'
import { imsStockDetail, palletCodeSkuList, latestImsStockOutRecord } from '@/api/modules/inventory'

export default {
  data() {
    return {
      palletCode: '',
      list: '',
      options: {
        id: null,
      },
      info: {
        stackNo: '',
        levelNo: '',
        locationNo: '',
        imsCode: '',
        areaCode: '',
        palletCode: '',
      },
    }
  },
  computed: {
    getDisabled() {
      return this.palletCode.length === 0
    },
  },
  async onLoad(options) {
    this.options = options
    const { id, palletCode, imsId } = options
    id && this.fetchData(id)
    if (palletCode) {
      const { data } = await latestImsStockOutRecord(palletCode)
      if (data?.imsId) {
        this.info = data
        this.palletCode = palletCode
        this.fetchSkuList(palletCode)
      }
    }
  },
  methods: {
    async fetchData(id) {
      const { data } = await imsStockDetail(id)
      this.info = data
      this.fetchSkuList(data.palletCode)
    },
    async fetchSkuList(palletCode) {
      const { rows } = await palletCodeSkuList({
        palletCode,
        pageNum: 1,
        pageSize: 10000,
      })
      this.list = rows.map((item) => ({ ...item, status: 0 }))
    },
    async handleChange(palletCode) {
      if (this.$Router.currentRoute.name !== 'StartInventory') {
        return
      }
      // 处理扫描拣货
      if (this.palletCode !== '') {
        const barcode = palletCode
        const index = this.list.findIndex((item) => item.skuBarcode === barcode)
        if (index === -1) {
          uni.showToast({
            title: '请扫描正确的商品条码',
            icon: 'none',
          })
          return
        }
        this.$set(this.list[index], 'status', 1)
        return
      }

      if (palletCode.startsWith('WMS-P-')) {
        if (this.info.palletCode !== palletCode) {
          uni.showToast({
            title: '请扫描正确的托盘码',
            icon: 'none',
          })
          return
        }
        this.palletCode = palletCode
      } else {
        uni.showToast({
          title: '请扫描正确的托盘码',
          icon: 'none',
        })
      }
    },
    handleClickNext() {
      this.$store.commit('inventory/setFromInfo', {
        ...this.info,
        imsInventoryDetailList: this.list,
      })
      router.push({
        name: 'ConfirmInventory',
        params: this.options,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.start-inventory {
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 311rpx);
    grid-gap: 24rpx;
    justify-content: center;
    padding: 20rpx;
    .item {
      background: #f0f5fc;
      border-radius: 12rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #2d3a47;
      text-align: center;
      padding: 13rpx 0;
      text {
        font-size: 24rpx;
        color: #566675;
        margin-bottom: 18rpx;
      }
    }
  }
  .box {
    background: #fff;
    border-radius: 40rpx 40rpx 0 0;
    padding: 32rpx;
    margin-top: 24rpx;
    flex: 1;
    .header {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    &_grid {
      display: grid;
      grid-template-columns: repeat(3, 217rpx);
      grid-gap: 18rpx;
    }
  }
}
</style>
